<%@ page import="cn.labbook.bluetooth.constant.TenantPayConstant" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <base href="<%=basePath%>">
    <title>蓝牙电表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="assets/css/admin/reset.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_893379_qj8lfap4ylj.css"/>
</head>
<style>
    /*让徽章上下居中*/
    .layui-badge {
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<body>
<div>
    <div class=" clearfix margin-15">
        <div class="layui-col-md12">
            <div class="layui-card-header">
                用电记录
            </div>
            <div class="layui-form layuiadmin-card-header-auto padding-tb-10 layui-card"
                 lay-filter="layadmin-userfront-formlist" id="searchForm">
                <div class="layui-form-item searchDiv" style="margin-bottom: 0">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="text-align: left">电表序号</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入电表序号" autocomplete="off"
                            class="layui-input" id="ammeterId">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="time" autocomplete="off" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" id="search"
                                lay-filter="LAY-user-front-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
                <div class="layui-tab-content">
                    <div class="layui-btn-div">
                        <button class="layui-btn" id="export">记录导出</button>
                    </div>
                </div>
            </div>
            <div class="layui-tab-content">
                <table class="layui-table" id="payPmList" lay-filter="payPmList"></table>
            </div>
        </div>
    </div>
</div>
</body>
<script src="assets/plugins/Jquery/jquery.min.js"></script>
<script src="assets/plugins/layui/layui.all.js"></script>
<script src="assets/js/common.js"></script>
<script>
    $(function () {
        var ammeterId = null;

        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table,
                laydate = layui.laydate;
            laydate.render({
                elem: '#time'
                ,range: true
            });
            var data = [
                {type: 'numbers', title: '序号'},
                {field: 'ammeterId', title: '电表序列号', sort: false, align: 'center'},
                {field: 'location', title: '电表地址', sort: false, align: 'center'},
                {field: 'readingTime', title: '本次抄表时间', sort: false, align: 'center'},
                {field: 'electricQuantity', title: '本次抄表总度数', sort: false, align: 'center'},
                {field: 'useQuantity', title: '用电量', sort: false, align: 'center'}
            ];
            table.render(
                renderTable("#payPmList", 'ammeterReading/page', data)
            );
            table.on('tool(payPmList)', function (obj) {
                var data = obj.data;
                ammeterId = data.ammeterId

            });
            $("#export").click(function () {
                var ammeterId = $("#ammeterId").val();
                var timeBegin=null;
                var timeEnd=null;
                if(!isEmpty($("#time").val())){
                    var split = $("#time").val().split(" - ");
                    timeBegin = split[0].trim();
                    timeEnd = split[1].trim();
                }
                location.href = "<%=basePath%>ammeterReading/guestRecharge?ammeterId=" + ammeterId+"&timeBegin="+timeBegin+"&timeEnd="+timeEnd
            })
            $("#search").click(function () {
                var ammeterId = $("#ammeterId").val();
                var timeBegin=null;
                var timeEnd=null;
                if(!isEmpty($("#time").val())){
                    var split = $("#time").val().split(" - ");
                    timeBegin = split[0].trim();
                    timeEnd = split[1].trim();
                }
                table.reload('payPmList', {
                    page: {curr: 1},
                    where: {
                        ammeterId: ammeterId,
                        timeBegin:timeBegin,
                        timeEnd:timeEnd
                    }
                })
            });
        });
    });

    $("#cancel").on("click", function () {
        layer.closeAll()
    });

    function hideFun() {
        layer.closeAll();
        userId = null
    }

    function hideWithReset(hide, reset) {
        $(hide).hide()
        $(reset)[0].reset()
    }
</script>
</body>
</html>
